<html>
	<head>
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/bootstrap-responsive.css">
		<!--[if lt IE 7]><link rel="stylesheet" href="css/bootstrap-ie6.css"><![endif]-->
		<link rel="stylesheet" href="css/bootstrap-image-gallery.css">
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/load-image.js"></script>
		<script src="js/bootstrap-image-gallery.js"></script>
		<script src="js/main.js"></script>
	</head>
	<body>
		<div id="modal-gallery" class="modal modal-gallery hide fade" tabindex="-1">
		<div class="modal-header">
			<a class="close" data-dismiss="modal">&times;</a>
			<h3 class="modal-title"></h3>
		</div>
		<div class="modal-body"><div class="modal-image"></div></div>
		<div class="modal-footer">
			<a class="btn btn-primary modal-next">Next <i class="icon-arrow-right icon-white"></i></a>
			<a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Previous</a>
			<a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000"><i class="icon-play icon-white"></i> Slideshow</a>
			<a class="btn modal-download" target="_blank"><i class="icon-download"></i> Download</a>
		</div>
		<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery">
			<a href="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" title="Banana" data-gallery="gallery">Banana</a>
			<a href="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" title="Apple" data-gallery="gallery">Apple</a>
			<a href="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg" title="Orange" data-gallery="gallery">Orange</a>
		</div>
		<script>
			$('#modal-gallery').on('load', function () {
					var modalData = $(this).data('modal');
					// modalData.$links is the list of (filtered) element nodes as jQuery object
					// modalData.img is the img (or canvas) element for the loaded image
					// modalData.options.index is the index of the current link
				});
			</script>
</div>
	</body>
</html>